<template>
  <div id="dataPage">
    <!-- 顶部欢迎部分 -->
    <div id="adminHello">
      <div id="adminLeft">
        <text>你好，管理员{{ adminData.name }}</text>
        <text id="logout" @click="logout">退出登录</text>
      </div>
      <el-date-picker v-model="date" type="daterange" range-separator="-" start-placeholder="开始日期"
        end-placeholder="结束日期" :shortcuts="shortcuts" size="large" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
        @change="dateSync" class="datePicker"></el-date-picker>
    </div>
    <!-- 数字中台 -->
    <div id="dataBar">
      <DataCard :data="revenueData">
        <Money></Money>
      </DataCard>
      <DataCard :data="orderData">
        <List></List>
      </DataCard>
      <DataCard :data="onGoingOrder">
        <WarnTriangleFilled></WarnTriangleFilled>
      </DataCard>
      <DataCard :data="takeOut">
        <Van></Van>
      </DataCard>
    </div>
    <!-- 收益中台 -->
    <div id="revenueBar">
      <div id="revenueCharBox">
        <LineChart :lineData="revenueChartData" :resizeOrNot="store.state.WindowSize"
          v-if="revenueChartData.xData.length > 0">
        </LineChart>
        <NotMsg v-else :keyWord="'收益'"></NotMsg>
      </div>
      <div id="revenueList">
        <TableList
          :tableStruct="[{ prop: 'time', label: '日期' }, { prop: 'revenue', label: '收益' }, { prop: 'orderNum', label: '订单数' }]"
          :tableData="dayRevenueData">
        </TableList>
      </div>
    </div>
    <!-- 商品中台 -->
    <div id="goodsBar">
      <div class="charBox">
        <PieChart :pieData="goodsTypeChartData" :resizeOrNot="store.state.WindowSize"
          v-if="goodsTypeChartData.data.length > 0">
        </PieChart>
        <NotMsg v-else :keyWord="'商品'"></NotMsg>
      </div>
      <div class="charBox space">
        <BarChart :barData="goodsSalesChartData" :resizeOrNot="store.state.WindowSize"
          v-if="goodsSalesChartData.xData.length > 0">
        </BarChart>
        <NotMsg v-else :keyWord="'销量'"></NotMsg>
      </div>
    </div>
  </div>
</template>

<script setup>
import Cookies from 'js-cookie'
import PieChart from '@/components/charts/PieChart.vue';
import BarChart from '@/components/charts/BarChart.vue';
import NotMsg from '@/components/NotMsg.vue';
import LineChart from '@/components/charts/LineChart.vue';
import DataCard from '@/components/DataCard.vue';
import TableList from '@/components/TableList.vue';
import { useRouter } from "vue-router"
const router = useRouter()
import { ElMessageBox } from 'element-plus'
import { getMonthFirstDay, getMonthLastDay, getYearFirstDay, getYearLastDay, getWeekFirstDay, getWeekLastDay } from '../utils/GeneralTool'
import { onMounted, ref, getCurrentInstance, reactive } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const { proxy } = getCurrentInstance()

let adminData = ref({
  name: ''
})

// 获取当前管理员
const getCurrentAdmin = () => {
  proxy.$api.getCurrentAdminData().then(res => {
    adminData.value = res
  })
}

// --dataBar数据展示--
// 当前日期对象
let currentTime = reactive({
  startTime: getMonthFirstDay(), // 当前月第一天
  endTime: getMonthLastDay(), // 当前月最后一天
})
// elementplus的日期选择载体
let date = ref([currentTime.startTime, currentTime.endTime])
// 同步日期函数，日期选择的change事件回调
const dateSync = () => {
  currentTime.startTime = date.value[0]
  currentTime.endTime = date.value[1]
  getDataBarData() // 重新加载dataBar数据
  getDayRevenueByTime() // 重新加载图表数据
  getGoodsSalesData() // 重新加载图表数据
}
// 日期选择器的可选日期选项
const shortcuts = [
  {
    text: '本周',
    value: () => {
      return [getWeekFirstDay(), getWeekLastDay()]
    },
  },
  {
    text: '本月',
    value: () => {
      return [getMonthFirstDay(), getMonthLastDay()]
    },
  },
  {
    text: '今年',
    value: () => {
      return [getYearFirstDay(), getYearLastDay()]
    },
  },
]
// 总收益
let revenueData = reactive({
  title: '总收益',
  dataNum: 0,
  iconColor: '#4CCD99'
})
// 通过当前时间范围获取总收益
const getRevenueDataByTime = () => {
  proxy.$api.getOrderRevenueByTime(currentTime).then(res => {
    revenueData.dataNum = res.total
  })
}

// 订单数
let orderData = reactive({
  title: '总订单数',
  dataNum: 0,
  iconColor: '#4CB9E7'
})
// 通过当前时间范围获取订单数
const getOrderDataNumByTime = () => {
  proxy.$api.getOrderNumByTime(currentTime).then(res => {
    orderData.dataNum = res.total
  })
}
// 进行中订单
let onGoingOrder = reactive({
  title: '进行中订单',
  dataNum: 0,
  iconColor: '#FFF455'
})
// 通过当前时间范围获取进行中订单数
const getOnGoingOrderDataNum = () => {
  proxy.$api.getOnGoingOrderNumByTime(currentTime).then(res => {
    onGoingOrder.dataNum = res.total
  })
}
// 外卖单数
let takeOut = reactive({
  title: '进行中外卖订单',
  dataNum: 0,
  iconColor: '#836FFF'
})
// 通过当前时间范围获取进行中的外卖订单数
const getOnGoingTakeOutOrderDataNum = () => {
  proxy.$api.getOnGoingTakeOutOrderNumByTime(currentTime).then(res => {
    takeOut.dataNum = res.total
  })
}

// 获取dataBar数据函数
const getDataBarData = () => {
  getRevenueDataByTime()
  getOrderDataNumByTime()
  getOnGoingOrderDataNum()
  getOnGoingTakeOutOrderDataNum()
}

// --图表展示--
let dayRevenueData = ref([]) // 表格日收益数据载体
// -(收益)折线图-
let revenueChartData = reactive({
  title: '收益曲线',
  xData: [],
  yData: []
}) // 折线图数据载体
// 获取日收益折线图数据：通过当前时间获取日收益
const getDayRevenueByTime = () => {
  proxy.$api.getDayRevenueDataByTime(currentTime).then(res => {
    dayRevenueData.value = res
    // 清空x轴和y轴原数据
    revenueChartData.xData = []
    revenueChartData.yData = []
    for (let i = 0; i < dayRevenueData.value.length; i++) { // 赋值折线图数据
      revenueChartData.xData.push(dayRevenueData.value[i].time)
      revenueChartData.yData.push(dayRevenueData.value[i].revenue)
    }
  })
}
// -(商品类型分布)饼图-
let goodsTypeChartData = reactive({
  title: '商品类型分布',
  data: []
}) // 饼图数据载体
// 获取商品类型分布数据
const getTypeAndGoodsCountData = () => {
  proxy.$api.getTypeAndGoodsCount().then(res => {
    goodsTypeChartData.data = res
  })
}
// -(商品销量)柱状图-
let goodsSalesChartData = reactive({
  title: '商品销量',
  xData: [],
  yData: [],
})
// 获取商品销量数据
const getGoodsSalesData = () => {
  proxy.$api.getGoodsSalesCount(currentTime).then(res => {
    goodsSalesChartData.xData = res.xData
    goodsSalesChartData.yData = res.yData
  })
}

// 获取图表数据
const getChartData = () => {
  getDayRevenueByTime() // 获取日收益折线图数据
  getTypeAndGoodsCountData() // 获取商品类型分布饼图数据
  getGoodsSalesData() // 获取商品销量柱状图数据
}

// 退出登录
const logout = () => {
  ElMessageBox.alert('确定退出登录吗', "退出成功", {
    type: 'warning',
    confirmButtonText: '确定',
    callback: () => {
      Cookies.remove('token') // 删除token
      router.push({
        path: '/login'
      }) // 跳转到首页
    }
  })
}
onMounted(() => {
  getCurrentAdmin() // 获取当前管理员
  getDataBarData() // 获取dataBar数据
  getChartData() // 获取图表数据
})
</script>

<style lang="scss" scoped>
#dataPage {
  padding: 20px 0;
}
#adminHello {
  display: flex;
  justify-content: space-between;
  padding: 0 2rem;
  align-items: center;

  #adminLeft {
    display: flex;
  }

  text {
    font-size: 2rem;
    white-space: nowrap; // 文本不换行
  }

  #logout {
    margin: 0 1rem;
    border: #191919 1px solid;
    padding: 0 1rem;
    border-radius: 5px;
    cursor: pointer;
  }

  #logout:hover {
    background-color: #191919;
    color: #fff;
  }

}

#dataBar {
  display: flex;
  margin: 2rem 0;
  height: 20rem;
}

#revenueBar {
  display: flex;
  margin: 4rem 2rem;
  height: 50rem;
  border-radius: 20px;
  border: solid .5rem #191919;

  #revenueCharBox {
    flex: 4;
  }

  #revenueList {
    flex: 2;
    margin: 2rem 0;
    padding: 0 2rem;
    border-left: #19191919 solid .1rem;
    overflow: hidden;
  }
}

#goodsBar {
  display: flex;
  margin: 4rem 2rem;
  height: 50rem;
  align-items: center;
  justify-content: center;

  .charBox {
    flex: 1;
    border-radius: 20px;
    border: #191919 solid .5rem;
    height: 100%;
  }

  .space {
    margin-left: 2rem;
  }

}
</style>
<style scoped>
/* 日期选择器样式 */
/deep/.el-range-editor--large.el-input__inner {
  border-radius: 10px;
  border: .5rem solid #191919;
  color: #191919;
}

/deep/.el-date-editor .el-range__icon svg {
  color: #191919;
}
</style>